<template>
    <div class="conbox app">
        <!-- <header>
            <van-dropdown-menu active-color="#ff6900">
                <van-dropdown-item v-model="value1" :options="option1" @change="switchaccount"/>
                <van-dropdown-item v-model="value2" :options="option2" @change="switchtype"/>
                <van-dropdown-item v-model="value3" :options="option3" @change="switchpaid"/>
            </van-dropdown-menu>
        </header> -->
        <div class="tab">
            <div class="item"
                :class="{on:activeIndex === index
                && (showRecord || showStatus || completeStatus)}"
                v-for="(item,index) in tabList"
                :key="item"
                @click="switchTab(index)">
                <span class="txt">{{item}}</span>
                <view class="iconfont iconxiala"></view>
            </div>
        </div>
        <uni-pop
            type="top"
            :custom="true"
            :show="showRecord || showStatus || completeStatus"
            ref="pop"
            :zIndex="900"
            @change="closePop">
            <div class="dropdown_list" v-if="showRecord">
                <div class="item" v-for="(item,index) in option1" :key="item.value" @click="switchRecord(index,item)">
                    <span class="left" :class="{on: recordIndex === index}">{{item.text}}</span>
                    <view v-show="recordIndex === index" class="iconfont iconxuanze"></view>
                </div>
            </div>
            <div class="dropdown_list" v-if="showStatus">
                <div class="item" v-for="(item,index) in option2" :key="item.value" @click="switchStatus(index,item)">
                    <span class="left" :class="{on: statusIndex === index}">{{item.text}}</span>
                    <view v-show="statusIndex === index" class="iconfont iconxuanze"></view>
                </div>
            </div>
            <div class="dropdown_list" v-if="completeStatus">
                <div class="item" v-for="(item,index) in option3" :key="item.value" @click="switchComplete(index,item)">
                    <span class="left" :class="{on: completeIndex === index}">{{item.text}}</span>
                    <view v-show="completeIndex === index" class="iconfont iconxuanze"></view>
                </div>
            </div>
        </uni-pop>
        <div class="account_content">
            <ul lass="centerul">
                <li class="account_list" v-for="(item,index) in list.data" :key="index">
                    <p class="chongzhi">
                        <span class="account_title"
                                :class="{red:item.log_type=='收入',green:item.log_type=='支出'}">{{item.log_type==2?'结算':item.log_type==3?'充值':item.log_type==4?'提现':'解冻'}}</span>
                        <span class="apply_way" v-if="(log_type==3)&&item.pay_name">充值({{item.pay_name}})</span>
                        <span class="account_price">￥{{item.amount}}</span>
                    </p>
                    <div class="account_remarks">
                        <p class="handle_status">{{item.status}}</p>
                        <p>备注：<span>{{item.remark}}</span></p>
                        <p>{{item.add_time}}</p>
                    </div>
                    <div class="group_btn" v-if="false">
                        <button>付款</button>
                        <button>取消</button>
                    </div>
                </li>
                <AppWrapperEmpty
                    type="noData"
                    :finished="list.finished"
                    :is-loading="list.loading"
                    :is-empty="$util.isEmpty(list.data)"
                />
            </ul>

        </div>
    </div>
</template>

<script>
import { getaccount } from '@/api/payment'
import { list } from '@/mixins'
import AppWrapperEmpty from '@/components/App_wrapper_empty'
import uniPop from '@/components/uni-popup/uni-popup'
export default {
	name: 'AccountDetails',
	components: {
		AppWrapperEmpty,
		uniPop
	},
	mixins: [list],
	data() {
		return {
			option1: [
				{ text: '分类', value: '' },
				{ text: '收入', value: 3 },
				{ text: '支出', value: 4 }
			],
			option2: [
				{ text: '类型', value: '' },
				{ text: '结算', value: 2 },
				{ text: '充值', value: 3 },
				{ text: '提现', value: 4 },
				{ text: '解冻', value: 5 }
			],
			option3: [
				{ text: '状态', value: '' },
				{ text: '已完成', value: 1 },
				{ text: '待处理', value: 2 }
			],
			recordIndex: 0,
			statusIndex: 0,
			completeIndex: 0,
			showRecord: false,
			showStatus: false,
			completeStatus: false,
			activeIndex: 0,
			log_type: '',
			label_account: '',
			is_paid: '',
			query: {}
		}
	},
	onPullDownRefresh() {
		this.resetList()
		this.init().then(res => {
			uni.stopPullDownRefresh()
		})
	},
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this.init().then(res => {
				uni.stopPullDownRefresh()
			})
		} else {
			uni.stopPullDownRefresh()
		}
	},
	computed: {
		tabList() {
			return [this.option1[this.recordIndex].text, this.option2[this.statusIndex].text, this.option3[this.completeIndex].text]
		}
	},
	onLoad(val) {
		this.query = val
	},
	mounted() {
		this.init()
	},
	methods: {
		closePop(e) {
			if (!e.show) {
				this.showRecord = false
				this.showStatus = false
				this.completeStatus = false
			}
		},
		switchTab(index) {
			if (index == 0) {
				this.showRecord = !this.showRecord
				this.showStatus = false
				this.completeStatus = false
			} else if (index == 1) {
				this.showStatus = !this.showStatus
				this.showRecord = false
				this.completeStatus = false
			} else {
				this.completeStatus = !this.completeStatus
				this.showRecord = false
				this.showStatus = false
			}
			this.activeIndex = index
		},
		switchRecord(index, val) {
			this.recordIndex = index
			this.label_account = val.value
			this.resetList()
			this.init()
		},
		switchStatus(index, val) {
			this.statusIndex = index
			this.log_type = val.value
			this.resetList()
			this.init()
		},
		switchComplete(index, val) {
			this.completeIndex = index
			this.is_paid = val.value
			this.resetList()
			this.init()
		},
		init() {
			this.list.limit = 10
			return getaccount({
				ru_id: this.query.owner_user_id,
				log_type: this.log_type,
				label_account: this.label_account,
				is_paid: this.is_paid,
				size: this.list.limit,
				page: this.list.page
			}).then(res => {
				this.completes(res)
			})
		}
	}
}
</script>

<style scoped lang='scss'>
    .app {
        background-color: #f5f5f5;
    }
    header {
        text-align: left;
        line-height: normal;
    }

    .account_content {
        width: 100%;
        height: auto;
        /*float: left;*/
        // margin-top: 120px;
        background: white;
        margin-top: 20px;
        line-height: 1.4;
    }

    .account_content ul {
        width: 100%;
        height: auto;
        /*float: left;*/
        display: block;
    }

    .account_content ul li {
        height: 200px;
        width: 90%;
        /* float: left;*/
        margin-left: 5%;
        padding: 30px 0;
        border-bottom: 2px solid #eeeeee;
    }

    .account_content ul li:last-child {
        border-bottom: none;
    }

    .account_content ul li .chongzhi {
        font-size: 30px;
    }
    .account_list .account_title {
        float: left;
        color: #999999;
    }

    .chongzhi .red {
        color: #FF5454;
    }

    .chongzhi .green {
        color: #10C025;
    }

    .handle_status {
        color: #FF6900;
    }

    .apply_way {
        margin-left: 32px;
    }

    .account_list .account_price {
        float: right;
    }

    .account_remarks {
        clear: both;
        margin-top: 29px;
        float: left;
        color: #999999;
        margin-left: 88px;
    }

    .group_btn {
        clear: both;
        float: right;
        margin-top: 20px;
    }

    .group_btn button {
        width: 140px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        border-radius: 30px;
        border: 2px solid #eeeeee;
        background: white;
    }

    .group_btn button:first-child {
        margin-right: 20px;
    }

   .tab {
    width: 100%;
	height: 100px;
	position: relative;
    z-index: 950;
    display: flex;
    background-color: #fff;
    border-top: 1px solid #ccc;
    .item {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.on {
            .txt,.iconxiala {
                color: #FF6900;
            }
        }
        .txt {
            font-size:30px;
            color:rgba(102,102,102,1);
            padding-right: 10px;
        }
    }
}
.dropdown_list {
    background-color: #fff;
	margin-top: 102px;
	width: 750px;
    .item {
        padding: 0 30px;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ddd;
        .left {
            &.on {
                color: #FF6900;
            }
        }
        .iconxuanze {
            color: #FF6900;
            font-size: 40px;
        }
    }
}
.iconxiala {
    color: #666;
	font-size: 24px;
}
</style>
